<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData">
				<view class="box">
					<uni-forms-item required label="姓名" name="customer_name">
						<uni-easyinput type="text" v-model="FormData.customer_name" :clearable="false" placeholder="请输入名字" />
					</uni-forms-item>
					<uni-forms-item required label="手机号" name="customer_mobile">
						<uni-easyinput type="number" v-model="FormData.customer_mobile" :clearable="false" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="证件号" name="customer_idcard">
						<uni-easyinput type="idcard" v-model="FormData.customer_idcard" :clearable="false" placeholder="请输入身份证号" />
					</uni-forms-item>
				</view>
				<view class="box">
					<uni-forms-item required label="开始时间" name="start_date">
						<picker mode="date" @change="bindTimeStart" :value="FormData.start_date">
							<view class="picker-input">
								{{ FormData.start_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="结束时间" name="end_date">
						<picker mode="date" @change="bindTimeEnd" :value="FormData.end_date" :start="FormData.start_date">
							<view class="picker-input">
								{{ FormData.end_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="box">
					<uni-forms-item label="备注" name="rent_remark">
						<uni-easyinput type="textarea" v-model="FormData.rent_remark" placeholder="请填写备注信息" />
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
import { isPhone } from '@/utils/validate';
export default {
	data() {
		return {
			FormData: {
				room_id: '',
				start_date: '',
				end_date: '',
				rent_remark: '',
				customer_list: '',
				customer_mobile: '',
				customer_name: '',
				customer_idcard: ''
			},
			rules: {
				customer_name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写姓名'
						}
					],
					validateTrigger: 'submit'
				},
				customer_mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请填写手机号'
						},
						{
							validateFunction: function (rule, value, data, callback) {
								if (!isPhone(value)) {
									callback('请输入正确的手机号');
								}
								return true;
							}
						}
					],
					validateTrigger: 'submit'
				},
				start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开始日期'
						}
					],
					validateTrigger: 'submit'
				},
				end_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择结束日期'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad(e) {
		this.FormData.room_id = e.id;
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		bindTimeStart(e) {
			this.FormData.start_date = e.detail.value;
		},
		bindTimeEnd(e) {
			this.FormData.end_date = e.detail.value;
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				let form = Object.assign({}, this.FormData);
				const data = [{
					customer_type: '1',
					customer_mobile: form.customer_mobile,
					customer_name: form.customer_name,
					customer_idcard: form.customer_idcard
				}];
				form.customer_list = JSON.stringify(data);
				delete form.customer_mobile;
				delete form.customer_name;
				delete form.customer_idcard;
				api.bookAdd(form).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '预定成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '预定失败',
							icon: 'none'
						});
					}
				});
			});
		}
	}
};
</script>